<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>学员信息</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
        list-style:none;
        box-sizing: border-box;
    }
    nav{
        width: 100%;
        background: #d8d8d8;
        text-align: center;
        padding: 85px 0;
        margin-bottom:40px;
    }
    nav h1{
        color: #655e5e;
        font-size: 40px;
        font-weight: 100;
        margin-bottom: 20px;
    }
    nav p{
        color: #616161;
    }
    .container{
        width:1130px;
        margin:auto;
    }
    .container h1{
        font-weight: 100;
        margin-bottom: 20px;
    }
    #n{
        width: 255px;
        height:37px;
        line-height: 60px;
        border-color: #bfb0b0;
        border-radius: 5px;
        outline: none;
        padding:0 10px;
    }
    #s{
        margin-left: 30px;
        border-color: #bfb0b0;
        border-radius: 5px;
        width: 255px;
        height:37px;
        outline: none;
        padding:0 10px;
    }
    #a{
        width: 255px;
        height:37px;
        margin-left: 30px;
        line-height: 60px;
        border-color: #bfb0b0;
        border-radius: 5px;
        outline: none;
        padding:0 10px;
    }
    #btn{
        width: 255px;
        height: 37px;
        background: #adc1ec;
        border-radius: 5px;
        margin-left:30px;
    }
    .xing{
        margin-top:45px;
    }
    #list li,.xing li{
        border-top: 1px solid #ccc;
        line-height: 55px;
    }
    #list li span,.xing li span{
        width:375px;
        display: inline-block;
    }
    .xing span{
        font-weight: bolder;
    }

</style>
<body>
    <nav>
        <h1>学员信息表</h1>
        <p>1804</p>
    </nav>
    <div class="container">
        <h1>添加</h1>
        <input type="text" placeholder="姓名" id="n">
        <select id="s">
            <option value="男">男</option>
            <option value="女">女</option>
        </select>
        <input type="number" placeholder="年龄" id="a">

        <button id="btn">添加</button>
        <ul class="xing">
            <li>
                <span>姓名</span><span>性别</span><span>年龄</span>
            </li>
        </ul>
        <ul id="list">

        </ul>
    </div>

    <script>
        document.querySelector("#btn").addEventListener("click",function () {
            var n = document.querySelector("#n").value;
            console.log(n);
            var s = document.querySelector("#s").value;
            console.log(s);
            var a = document.querySelector("#a").value;
            console.log(a);
            loadXMLDoc();


            var xmlhttp;
            if (window.XMLHttpRequest)
            {
                //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
                xmlhttp=new XMLHttpRequest();
            }
            else
            {
                // IE6, IE5 浏览器执行代码
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange=function()
            {
                if (xmlhttp.readyState==4 && xmlhttp.status==200)
                {
                    console.log(xmlhttp.responseText);
//                    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
                }
            }
            xmlhttp.open("GET","http://localhost/ajaxapi/public/index.php/index/student/addstudent?studentName="+n+"&sex="+s+"&age="+a,true);
            xmlhttp.send();

        })
        function loadXMLDoc()
        {
            var xmlhttp;
            if (window.XMLHttpRequest)
            {
                //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
                xmlhttp=new XMLHttpRequest();
            }
            else
            {
                // IE6, IE5 浏览器执行代码
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange=function()
            {
                if (xmlhttp.readyState==4 && xmlhttp.status==200)
                {
                    var json = JSON.parse(xmlhttp.responseText);
                    console.log(json);
                    document.querySelector("#list").innerHTML="";
                    for(let i = 0; i<json.data.length; i++){
                        var li = document.createElement("li");
                        var spanName = document.createElement("span");
                        spanName.innerHTML = json.data[i].studentName;
                        var spanSex = document.createElement("span");
                        spanSex.innerHTML = json.data[i].sex;
                        var spanAge = document.createElement("span");
                        spanAge.innerHTML = json.data[i].age;

                        li.appendChild(spanName);
                        li.appendChild(spanSex);
                        li.appendChild(spanAge);

                        document.querySelector("#list").appendChild(li);
                    }
//                console.log(xmlhttp.responseText);
//                document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
                }
            }
            xmlhttp.open("GET","http://localhost/ajaxapi/public/index.php/index/student/student",true);
            xmlhttp.send();
        }
        loadXMLDoc();
    </script>

</body>
</html>